<template>
	<view>
		<template v-if="diy">
			<!-- 自定义顶部导航切换卡 -->
			<view
				v-if="diy.navbar.display"
				class="global-navbar"
				:style="diy.navbar.background">
				<view
					:class="diy.navbar.hover==index?'global-navbar-for global-navbar-for-hover':'global-navbar-for'"
					v-for="(item, index) in diy.navbar.list" :key="index"
					@click="clickNavbarButton(index,item.name)">
					<view class="global-navbar-for-text">
						<view
							:style="diy.navbar.navbarTextStyle"
							class="global-navbar-for-text-name">
							{{item.name[$i18n.locale]}}
						</view>
						<view
							v-if="diy.navbar.hover == index"
							:style="diy.navbar.hoverStyle"
							class="global-navbar-for-text-hover"></view>
					</view>
				</view>
			</view>
			<view class="global-navbar-placeholder" v-if="diy.navbar.display"></view>
			<!-- 切换卡 diy 数据 -->
			<youransns-diy
				:youransnsConfig="diy.tabList[diy.navbar.hover]"
				v-if="youransnsDiyStatus"></youransns-diy>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				diy:null,//diy配置文件
				youransnsDiyStatus:false,// 组件加载状态
			}
		},
		onShow() {
			setTimeout(()=>{
				// 是否登录
				if(this.$_isLogin()){
					// 一些回调，查阅 DeveloperGuide.md
					if(
						uni.getStorageSync('editorPublishSuccess') ||
						uni.getStorageSync('noticePostDeleteSuccess'))
					{
						this.youransnsDiyStatus = false;
						this.getDiyConfig();
						uni.removeStorageSync('editorPublishSuccess');
						uni.removeStorageSync('noticePostDeleteSuccess');
					}
					// 是否有未读
					this.$_isNotification()
				}
			},200);
		},
		onLoad() {
			this.getDiyConfig();
		},
		methods: {
			getDiyConfig(){
				// 先判断是否开启了开发模式，开发模式是没有缓存的
				// 判断是否有缓存，有，读取缓存，没有，请求配置文件并且储存缓存
				if(this.$_developMode()){
					uni.request({
						url: this.$_configFile() + "diy_2.json",
						success: (res) => {
							this.diy = res.data;
							this.$nextTick(() => {
								this.youransnsDiyStatus = true;
							});
							uni.setNavigationBarTitle({
								title: this.diy.setNavigationBarTitle[this.$i18n.locale]
							});
						}
					})
				}else{
					if(uni.getStorageSync('diy_2_json')){
						this.diy = JSON.parse(uni.getStorageSync('diy_2_json'));
						this.$nextTick(() => {
							this.youransnsDiyStatus = true;
						});
						uni.setNavigationBarTitle({
							title: this.diy.setNavigationBarTitle[this.$i18n.locale]
						});
					}else{
						uni.request({
							url: this.$_configFile() + "diy_2.json",
							success: (res) => {
								uni.setStorageSync('diy_2_json', JSON.stringify(res.data));
								this.diy = res.data;
								this.$nextTick(() => {
									this.youransnsDiyStatus = true;
								});
								uni.setNavigationBarTitle({
									title: this.diy.setNavigationBarTitle[this.$i18n.locale]
								});
							}
						})
					}
				}
			},
			// 点击切换卡
			clickNavbarButton(index,name){
				uni.setNavigationBarTitle({title: name[this.$i18n.locale]});
				this.diy.navbar.hover = index;
				this.youransnsDiyStatus = false;
				this.$nextTick(() => {
					this.youransnsDiyStatus = true;
				});
			},
		},
		// 微信分享
		onShareAppMessage(res) {
			return {
				title: uni.getSystemInfoSync().appName,
				path: '/pages/navigation/diy_2'
			}
		},
		// 分享到朋友圈
		onShareTimeline() {
			return {
				title: uni.getSystemInfoSync().appName,
				path: '/pages/navigation/diy_2'
			}
		},
		// 上拉加载事件
		onReachBottom() {
			uni.$emit('onReachBottom')
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.youransnsDiyStatus = false;
			this.getDiyConfig();
			this.$nextTick(() => {
				uni.stopPullDownRefresh();
			});
		}
	}
</script>

<style lang="scss"></style>
